<template>
  <div class="employees-detail-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="登录账号设置">
            <!-- 放置表单 -->
            <el-form ref="userForm" label-width="120px" style="margin-left: 120px; margin-top:30px" :model="userInfo" :rules="rules">
              <el-form-item label="姓名:" prop="username">
                <el-input v-model="userInfo.username" style="width:300px" />
              </el-form-item>
              <!-- <el-form-item label="密码" prop="password">
                <el-input v-model="userInfo.password" type="password" autocomplete="off" />
              </el-form-item> -->
              <el-form-item label="确认密码" prop="newPassword">
                <el-input v-model="userInfo.newPassword" type="password" autocomplete="off" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveUser">更新</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情">
            <!-- 设置打印提示图标按钮  el-tooltop-->
            <el-tooltip class="tooltip-box" content="打印基本个人信息">
              <router-link :to="`/employees/print/${userId}?type=personal`">
                <i class="el-icon-printer" />
              </router-link>
            </el-tooltip>

            <UserInfo />
            <!-- 内容 -->
          </el-tab-pane>
          <el-tab-pane label="岗位信息">
            <!-- 内容 -->

            <!-- 设置打印提示图标按钮  el-tooltop-->
            <el-tooltip class="tooltip-box" content="打印个人岗位信息">
              <router-link :to="`/employees/print/${userId}?type=job`">
                <i class="el-icon-printer" />
              </router-link>
            </el-tooltip>
            <JobInfo />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { reqGetUserDetailById } from '@/api/user'
import { reqSaveUserDetailById } from '@/api/employees'
import UserInfo from './components/user-info.vue'
import JobInfo from './components/job-info.vue'
export default {
  name: 'EmployeesDetail',
  components: {
    UserInfo,
    JobInfo
  },

  data() {
    return {
      userInfo: {
        username: '',
        // password: '',
        newPassword: '',
        id: this.userId
      },
      rules: {
        username: [
          // 姓名的不能为空校验
          { required: true, trigger: ['blur', 'change'], message: '不能为空' }
        ],
        // password: [
        //   { required: true, trigger: ['blur', 'change'], message: '密码必须是6-9' },
        //   { validator: password, trigger: 'blur' }
        // ],
        newPassword: [
          // 密码6-9的校验
          { required: true, trigger: ['blur', 'change'], message: '不能为空' },
          { min: 6, max: 9, message: '密码必须是6-9位', trigger: ['blur', 'change'] }
          // { validator: newPassword, trigger: 'blur' }
        ]

      }
    }
  },
  // 获取到传递过来的id进行发送请求提交-可以用一个计算属性存储
  computed: {
    userId() {
      return this.$route.params.id
    }
  },
  //  一进页面就发请求，拿到数据回显姓名
  async created() {
    const { data } = await reqGetUserDetailById(this.userId)
    console.log(data)
    this.userInfo = data
    console.log('我是被重新赋值的新userInfo', this.userInfo)
  },
  methods: {
    saveUser() {
      //  把修改后的用户信息，发请求保存到服务器
      // 先进行表单验证el-form 自带的校验方法 validate
      this.$refs.userForm.validate(async flag => {
        // 没有通过校验，提醒用户然后直接退出
        if (!flag) {
          this.$message.error('修改失败请重新操作')
          return
        }
        // 进行到这一步就说明通过校验-发起请求-必须携带Id
        console.log('我是new', this.userInfo.newPassword)
        const res = await reqSaveUserDetailById({
          ...this.userInfo,
          password: this.userInfo.newPassword
        })
        this.$message.success('保存成功')
        console.log('我是修改后然后返回的结果', res)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.employees-detail-container{
  padding-top: 10px;
  .tooltip-box{
    position: absolute;
    right:5px;
    top:10px;
    z-index: 999;

  }
}

</style>
